<template>
    <div>
        <el-row>
            <el-button type="primary" plain size="small" @click="toFormHandler">增加</el-button>
        </el-row>
        <el-table
        :data="BaseFileList"
        style="width: 100%"
        :row-class-name="tableRowClassName">
            <el-table-column
                prop="id"
                label="ID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="fileName"
                label="文件名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="groupName"
                label="文件夹">
            </el-table-column>
             <el-table-column
                prop="uploadTime"
                label="更新时间">
                <template slot-scope="scope">
                {{scope.row.uploadTime | fmtDate}}
                </template>
            </el-table-column>
             <el-table-column
                prop="extName"
                label="后缀名">
            </el-table-column>
             <el-table-column
                prop="fileSize"
                label="文件大小">
            </el-table-column>
             <el-table-column
                prop="fileType"
                label="文件类型">
            </el-table-column>
             <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    class="butUpdate"
                    size="small"
                    @click="handleEdit(scope.$index, scope.row)">更新</el-button>
                    <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {get,post,del} from "@/utils/request"
export default {
    data () {
        return {
            BaseFileList:[]
        }
    },
    methods: {
        // 删除数据
        handleDelete(index,row){
             // 定义一个变量存储url
             let url="http://localhost:8888/basefile/deleteById"
            //  调用接口 把改行的id传给后台进行删除
           
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    console.log(row.id);
                    post(url,{id:row.id}).then(resp=>{
                        console.log(resp)
                    })
                    this.loadBaseFileData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });
        },
        // 更新数据
        handleEdit(index,row){
            // 跳转到表单界面并且把改行数据发送到表单界面
             this.$router.push({
                path:"/zhou/baseFileForm",
                query:row
            })
        },
        // 跳转到表单
        toFormHandler(){
            this.$router.push({
                path:"/zhou/baseFileForm"
            })
        },
        // 属性来为 Table 中的某一行添加 class
        tableRowClassName({row, rowIndex}) {
            if (rowIndex%2 === 0) {
            return 'warning';
            } else if (rowIndex%2 === 1) {
            return 'success';
            }
            return '';
        },
        // 获取表格数据
        loadBaseFileData(){
            // 定义一个变量存储url
            let url="http://localhost:8888/basefile/query";
            get(url).then(resp=>{
                console.log(resp);
                this.BaseFileList=resp.data;

            })
        }
    },
    created () {
        this.loadBaseFileData();
    }
}
</script>

<style lang="scss" scoped>
.butUpdate{
    background: #2dc888;
    color: #fff;
}
.el-table .success{
    background: #d0f5f1 !important;
}
.el-table .warning{
    background: #d2eef3 !important;
  }
</style>

